<template>
  <div>
    <Card>
      <span slot="title"> 订单统计 </span>
      <div slot="title1">
        <div>
          时间范围
          <!-- 引入时间 -->
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="value1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker>
          <el-button @click="fn" style="margin-left: 10px" type="primary"
            >查询</el-button
          >
        </div>
        <Charts v-if="isshow" :option="option" />
        <!-- 引入echarts -->
      </div>
    </Card>
  </div>
</template>

<script>
import moment from "moment";
//  <!-- 引入echarts -->
import Card from "@/components/Card.vue";

import Charts from "@/components/Charts.vue";

import { apiecharts2_js } from "@/apis/Echarts.js";

export default {
  components: {
    Card,
    Charts,
  },
  data() {
    return {
      option: {
        text: "订单统计",
        xData: "",
        orderTime: "",
        type: "line",
        title: {
          name1: "订单数据",
          name2: "订单金额",
        },
      },
      value1: "",
      isshow: false,
      
    };
  },

  created() {
    this.getlist();
  },
  methods: {
    async getlist(datec = "[]") {
      let { data } = await apiecharts2_js({
        date: datec,
      });

      this.option.orderData = data.map((item) => item.orderAmount);
      this.option.xData = data.map(
        (item) => (item.orderTime = moment(item.orderTime).format("YYYY-MM-DD"))
      );
      this.isshow = true;
    },
    //点击查询的参数
     fn() {
      this.getlist(JSON.stringify(this.value1))
      console.log(date);
    },
  },
};
</script>

<style lang="less" scoped>
</style>